<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, onBeforeMount, ComponentInternalInstance } from "vue"
import { TREE_DATA, defaultProps } from "./config/config";
import { View } from '@element-plus/icons'


// this
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// open the url
const handleNodeClick = ({ url }) => {
  if (url) window.open(url);
}

// onBeforeMount
onBeforeMount((): void => {
})

// onMounted
onMounted(async (): Promise<void> => {
})

// Exportation
defineExpose({
})
</script>


<template>
  <div id="reference">
    <div class="wrapper">
      <div class="title">Here provides you some libs and plugins to develope your own destination.</div>
      <el-tree
        :data="TREE_DATA"
        :props="defaultProps"
        node-key="id"
        @node-click="handleNodeClick"
        :icon="View"
        default-expanded-keys="0"
      />
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
$headH: 2.5rem;

#reference {
  width: 100%;
  height: 100%;
  position: relative;
  @include flex-column-center-center;
}

.wrapper {
  width: 97%;
  height: 94%;
  background: rgba($color: #000000, $alpha: 0.5);
  border-radius: 6px;
  padding: 10px;
  @include flex-column;
  overflow-x: hidden;
  overflow-y: auto;
}
.wrapper::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.2);
}
.wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(250, 250, 250, 0.697);
  background-color: rgba(105, 103, 103, 0.445);
}

.title {
  font-weight: bold;
  font-size: 2rem;
  color: white;
  padding: 1rem 0px 1rem 0px;
  // @include clipper
}
</style>
